<template>
    <view class="order-detail-page">
        <!-- 顶部自定义导航栏 -->
        <view class="nav">
            <view class="nav-left" @click="goBack">
                <uni-icons type="left" size="20" color="#333" />
            </view>
            <view class="nav-title">订单详情</view>
            <view class="nav-right"></view>
        </view>
        <view class="nav-holder"></view>

        <!-- 商品卡片 -->
        <view class="card good-card">
            <image class="good-img" :src="good.img" mode="aspectFill" />
            <view class="good-right">
                <view class="good-title">{{ good.title }}</view>
                <view class="good-sub">{{ good.spec }}</view>
                <view class="good-row">
                    <text class="good-num">数量:{{ good.num }}</text>
                    <text class="good-price">¥ {{ good.price }}</text>
                </view>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="op-row">
            <view class="op-btn">
                <uni-icons type="phone" size="18" color="#ff8000" />
                <text class="op-text">联系客服</text>
            </view>
            <view class="op-btn">
                <uni-icons type="chatboxes" size="18" color="#ff8000" />
                <text class="op-text">投诉&建议</text>
            </view>
        </view>

        <!-- 信息列表 -->
        <view class="card info-card">
            <view class="info-row">
                <text class="label">订单编号：</text>
                <text class="value">{{ orderNo }}</text>
            </view>
            <view class="info-row">
                <text class="label">下单时间：</text>
                <text class="value">{{ orderTime }}</text>
            </view>
            <view class="info-row addr">
                <text class="label">收货地址：</text>
                <text class="value multiline">{{ address }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import { public_img } from '@/static/public.js';

export default {
    data() {
        return {
            orderNo: '',
            orderTime: '',
            address: '',
            good: {
                img: public_img + '/img/placeholder.png',
                title: '',
                spec: '',
                num: 1,
                price: ''
            }
        };
    },
    onLoad() {
        // 接收列表页传入的数据，仅用于样式展示
        const ec = this.getOpenerEventChannel && this.getOpenerEventChannel();
        ec && ec.on && ec.on('orderDetail', ({ order }) => {
            if (order) {
                this.orderNo = order.code || order.order_no || order.orderSn || order.orderNum || order.sn || '';
                this.orderTime = order.createtime || order.create_time || order.createTime || order.time || '';
                const addr = order.address || order.addr || order.receive_address || '';
                this.address = addr || '—';
                const g = this.extractGood(order);
                this.good = {
                    img: this.formatImg(g.img || g.image),
                    title: g.title || g.name || '',
                    spec: g.spec || g.norm || '',
                    num: g.num || g.quantity || 1,
                    price: g.price || g.money || ''
                };
            }
        });
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        extractGood(order) {
            if (order && (order.title || order.img)) {
                return {
                    img: order.img,
                    title: order.title,
                    spec: order.norm,
                    price: order.price,
                    num: order.num
                };
            }
            if (Array.isArray(order?.goods) && order.goods.length) return order.goods[0];
            if (Array.isArray(order?.items) && order.items.length) return order.items[0];
            return {};
        },
        formatImg(img) {
            if (!img) return public_img + '/img/placeholder.png';
            return img.startsWith('http') ? img : (public_img + img);
        }
    }
};
</script>

<style lang="scss" scoped>
.order-detail-page {
    min-height: 100vh;
    background: #f6f6f6;
}
.nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    z-index: 10;
    padding: 0 10px;
    box-shadow: 0 1px 0 0 #eee;
}
.nav-holder { height: 44px; }
.nav-title {
    font-size: 18px;
    font-weight: 700;
}
.nav-left, .nav-right { width: 40px; display: flex; align-items: center; }

.card {
    background: #fff;
    border-radius: 8px;
    margin: 10px;
    box-shadow: 0 0 0 1px #f0f0f0 inset;
}
.good-card {
    display: flex;
    padding: 12px;
}
.good-img {
    width: 90px;
    height: 90px;
    border-radius: 6px;
    background: #f7f7f7;
}
.good-right {
    flex: 1;
    margin-left: 12px;
}
.good-title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}
.good-sub {
    margin-top: 6px;
    font-size: 13px;
    color: #999;
}
.good-row {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.good-num { font-size: 14px; color: #666; }
.good-price { font-size: 18px; color: #ff3b30; font-weight: 600; }

.op-row {
    display: flex;
    justify-content: space-between;
    margin: 0 10px;
}
.op-btn {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    margin: 0 5px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px #f0f0f0 inset;
}
.op-text {
    margin-left: 6px;
    color: #333;
    font-size: 15px;
}

.info-card { padding: 10px 12px; }
.info-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
    align-items: flex-start;
}
.info-row:last-child { border-bottom: none; }
.label { color: #999; font-size: 14px; width: 90px; }
.value { color: #333; font-size: 14px; }
.multiline { white-space: pre-wrap; }
.addr .value { line-height: 20px; }
</style>


